<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button>发送请求</button>
<button>发送请求百度</button>
</body>

<script>
	const btns = document.querySelectorAll("button");
	function jsonp(url,config){
		return new Promise(function(resolve,reject){
			const fnName = "zhang"+Math.random().toString(36).slice(2)+Date.now();
			window[fnName]=function(body){
				resolve(body);
			}
			const script = document.createElement("script");
			if(config.params){
				if(!config.jsonp){
					config.jsonp="cb";
				}
				config.params[config.jsonp]=fnName;
				url+="?"+Object.keys(config.params).map(key=>key+"="+config.params[key]).join("&");
				// 将对象转为====>urlencoded a=1&b=2
				// console.log(config.params);// {a:1,b:2}
				// console.log(Object.keys(config.params));// ["a","b"]
				// console.log(Object.keys(config.params).map(key=>key+"="+config.params[key]));// ["a=1","b=2"]
				// console.log(Object.keys(config.params).map(key=>key+"="+config.params[key]).join("&"));// a=1&b=2
				
			}
			script.src = url;
			script.onload = function(){
				// 当script请求完毕之后执行
				delete window[fnName];
				document.body.removeChild(script);
			}
			document.body.appendChild(script);
		})
		
	}
	btns[0].onclick = function(){
		jsonp("http://zhangpeiyue.com/sum",{
			params:{
				a:1,
				b:2
			},
			//  与服务端约定好的查询字符串的属性名，用于存储接收数据的方法
			jsonp:"cb"
		}).then(value=>{
			console.log(value);// 响应体信息
		})
	}
	btns[1].onclick = function(){
		// https://www.baidu.com/sugrec?prod=pc&wd=%E4%B8%89%E5%9B%BD&cb=fn
		jsonp("https://www.baidu.com/sugrec",{
			params:{
				prod:"pc",
				wd:"三国"
			}
		}).then(value=>{
			console.log(value);
		})
	}

</script>
</html>